@media all
{
     html{font-size:16px;}
}
@media all and (min-width:140px) and (min-height:220px)
{
     html{font-size:9px;}
}
@media all and (min-width: 220px) and  (min-height: 140px)
{
     html {font-size: 9px;}
}
@media all and (min-width:210px) and (min-height:280px),(min-width:280px) and (min-height:210px),(min-width:280px) and (min-height:280px)
{
     html{font-size:14px;}
}
@media all and (min-width:300px) and (min-height:460px),(min-width:460px) and (min-height:300px)
{
     html{font-size:16px;}
}
@media all and (min-width:340px) and (min-height:620px),(min-width:620px) and (min-height:340px)
{
     html{font-size:20px;}
}
@media all and (min-width:420px) and (min-height:760px) and (max-height:900px),
                  (min-width:760px) and (max-width:900px) and (min-height:420px)
{
     html{font-size:24px;}
}
@media all and (min-width:1000px) and (min-height:740px),(min-width:740px) and (min-height:1000px)
{
     html{font-size:20px;}
}
@media all and (min-width:1200px) and (min-height:600px),(min-width:600px) and (min-height:1200px)
{
     html{font-size:16px;}
}
@media all and (device-width:1024px) ,(device-width:768px)
{
     html{font-size:20px;}
}
@media all and (device-width:960px) and (device-height:640px),(device-width:640px) and (device-height:960px)
{
     html{font-size:32px;}
}
@media all and (device-width:480px) and (min-device-height:800px) and (max-device-height:900px),
                  (min-device-width:800px) and (max-device-width:900px) and (device-height:480px)
{
     html{font-size:24px;}
}
@media all and (device-width:360px) and (device-height:640px),(device-width:640px) and (device-height:360px)
{
     html{font-size:20px;}
}
@media all and (device-width:320px) and (device-height:480px),(device-width:480px) and (device-height:320px)
{
     html{font-size:16px;}
}
@media all and (device-width:240px) and (device-height:320px),(device-width:320px) and (device-height:240px),(device-width:320px) and (device-height:320px)
{
     html{font-size:14px;}
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
body{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
a:active{opacity: .8;text-decoration: none;}
a:link,header a:visited{opacity: 1;text-decoration: none;}
a:hover{opacity: .8;text-decoration: none;}
.fn_hide{display: none;}
/*base*/
html,body{-webkit-touch-callout: none;position: relative;}
.title{margin:2.5% 2%;padding: 0 2%;border:1px solid #e0d8d2;border-radius: 5px;background-color: rgb( 255, 255, 219 );box-shadow: 0px 1px 3px 0px #999;font-size: 0.5em;color: #9b5527;line-height: 3em;text-align: center;}
.banner{height: auto;width: 100%;overflow-x: hidden;overflow-y: hidden;}

.banner .bannerbox{width: 100%;height: auto;white-space: nowrap;}
.banner a{overflow: hidden;display: inline-block;width: 100%;height: auto;}
.banner img{
    width: 100%;height:auto;  
    -webkit-transform-style:preserve-3d;
    -webkit-transition:.7s;
}
.move{
    -webkit-backface-visibility:?hidden;
    /*-webkit-transform-style: preserve-3d;*/
    -webkit-transition:all .5s ease ;
    }

.imgnum{height: 1.25em;margin-bottom: 1.25em;line-height: 1.25em;text-align: center;}
.imgnum i{display: inline-block;height: 10px;width: 10px;margin: 0 3px;border-radius: 5px;background-color: #ccc;opacity: 0.8;font-size: 0;line-height: 10px;box-shadow: 0 0 3px #000}
.imgnum i.current{background-color: #00b7ee;}

.classlist{}
.classlist li{width: 82%;padding: 0 0.5em 0.5em;margin: 0 auto 1.14em;background-color: #fff;border-radius: 4px;box-shadow:0 0 3px #000 ;font-size: 0.88em;line-height: 1.86em;color: #666}
.classlist li img{display: block;width: 100%}
.classlist li a span{color: #666}

.tool{position: fixed;height: 2.2em;width: 100%;top:0;border-bottom: 1px solid #d6d6d6;text-align: center; background-image: -webkit-linear-gradient( 90deg, rgb(245,245,245) 0%, rgb(243,243,243) 54%, rgb(237,237,237) 100%);background-image: -moz-linear-gradient( 90deg, rgb(245,245,245) 0%, rgb(243,243,243) 54%, rgb(237,237,237) 100%); background-image: -ms-linear-gradient( 90deg, rgb(245,245,245) 0%, rgb(243,243,243) 54%, rgb(237,237,237) 100%);line-height: 2.2em;color: #333;font-size:1.2em;font-weight: 700;text-shadow: 0 1px 1px #999;z-index: 9}

.tool h1{height: 100%;border-radius: 15px 15px 0 0;}
.tool>a{position: absolute;top:0;width: 1.21em;height: 100%;font-size: 1em;text-indent: 9999em;z-index: 3;outline: 0 none}
.tool a.go_back{overflow: hidden;left: 0.3em;padding-right: .4em;border-right: 1px solid #fafafa;background: url(../images/back.png)  0 center no-repeat;background-size:  1.21em auto;}
.tool a.go_options{overflow: hidden;right:0.3em;padding-left: .4em;border-left: 1px solid #d6d6d6;background: url(../images/main.png) center center no-repeat;background-size:  1.21em auto;}

.tool .go_back::after{position: absolute;top:0;right:0;width: 0;height: 100%;line-height: 100%;font-size: 1em;text-indent: 9999em;content: '';border-left: 1px solid #d6d6d6;}

.tool .options_menubox{position: absolute;width: 50%;height: 12.36em;padding-right: 5px;top: 2.5em;right: 0.2em;font-size: 0.88em;}
.tool .options_menu{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling: touch;position: absolute;width: 100%;height: 12.36em;background-color: #393a44;text-align: center;opacity: .95;z-index: 5;-webkit-user-select: none;border-radius: 0.36em;border: 1px solid #87888d}
.tool .options_menu a{display: block;line-height: 2.14em;color: #fff;text-shadow:0 1px 1px #26262e;border-top: 1px solid #87888d;border-bottom: 1px solid #27282f;}
.tool .options_menu a:first-child{border:0 none;border-bottom: 1px solid #27282f;}
.tool .options_menu a:last-child{border:0 none;border-top: 1px solid #87888d}
.tool .options_menubox::after{content: '';position: absolute;right:.5em;top:-0.45em;width: 0;height: 0;font-size: 1em;border-top:0px solid transparent;border-right:0.5em solid transparent;border-bottom:0.5em solid #999;border-left:0.5em solid transparent;border-style:dotted dotted  solid dotted;border-style:solid solid solid solid\9\0;z-index: 6;opacity: .85}
.tool .options_menubox::before {content: '';position: absolute;right:.5em;top:-0.35em;width: 0;height: 0;font-size: 1em;border-top:0px solid transparent;border-right:0.5em solid transparent;border-bottom:0.5em solid #393A44;border-left:0.5em solid transparent;border-style:dotted dotted  solid dotted;border-style:solid solid solid solid\9\0;z-index: 7;opacity: .85}

.banner2{width: 90%;height: auto;margin:3em auto 1.16em ;padding: 2%;font-size: 1.2em;background-color: #fff;border:1px solid #d2d2d2;border-radius: 0.8em;line-height: 0;box-shadow: 0 1px 2px #999;}
.banner2 img{width: 100%;height: auto;border-radius: 0.4em;box-shadow: 0 0 2px #333333;}
.menu{height: 2.71em;width: 50%;margin: 0 auto;font-size: 0.88em;text-align: center;line-height: 1.71em;}
.menu a{display: inline-block;width: 30%;border-radius: 1em;font-size: 1em;color: #333}
.menu a.current{position: relative;background-color: #d0d0d0;box-shadow: 0 0 3px #999 inset;}
.menu a.current::after{content: '';position: absolute;left:50%;top:2em;width: 0;height: 0;margin-left: -0.8em;font-size: 1em;border-top:0px solid transparent;border-right:0.8em solid transparent;border-bottom:0.8em solid #999;border-left:0.8em solid transparent;border-style:dotted dotted  solid dotted;border-style:solid solid solid solid\9\0;z-index: 1;}
.menu a.current::before{content: '';position: absolute;left:50%;top:2.2em;width: 0;height: 0;margin-left: -0.9em;font-size: 1em;border-top:0px solid transparent;border-right:0.9em solid transparent;border-bottom:0.9em solid #fff;border-left:0.9em solid transparent;border-style:dotted dotted  solid dotted;border-style:solid solid solid solid\9\0;z-index: 3;}
.menu a:active{opacity: 1}

.content{overflow: auto;border-top: 1px solid #999;box-shadow: 0 1px 1px #eee inset;background-color: #fff;}
.content p{padding: 0 10% 0 6%;font-size: 0.88em;line-height: 1.79em;color: #666}
.content p:nth-child(1){padding-top: 1.14em;}
.content .conlist{overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling: touch;width:100%;white-space: nowrap}
.content .classlist{width: 100%;padding: 1.14em;}
.content .classlist li{display: inline-block;margin-right: 15px;}
.content .classlist li img{}




